<template>
    <div class="box-content">
        <div class="navigation">内容管理/疑难问题</div>
        <!--搜索-->
        <div class="mt-3">
            <div>
                <el-input type="text" style="width: 200px;"  :clearable="true" class=" mrt-10" v-model="search.inputName" placeholder="输入关键字疑难问题"></el-input>
                <el-button type="primary" class=" mrt-10" @click="onSearch">查询</el-button>
                <el-button type="primary" @click="openShanHu">新增</el-button>
            </div>
        </div>
        <!--表格-->
        <div class="mt-3">
            <el-table
                    :data="userData"
                    v-loading="loading"
                    align="center"
                    :element-loading-text="loadText"
                    :header-cell-style="tableHeaderColor"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        align="center"
                        label="编号"
                        width="100"
                >
                </el-table-column>
                <el-table-column
                        prop="title"
                        align="center"
                        label="标题"
                >
                </el-table-column>
                <el-table-column
                        prop="brief_info"
                        align="center"
                        label="简介"
                >
                </el-table-column>
                <el-table-column
                        prop="type"
                        align="center"
                        label="类型"
                >
                </el-table-column>
                <el-table-column
                        prop="user.phone"
                        align="center"
                        label="用户手机号"
                >
                </el-table-column>

                <el-table-column
                        label="内容"
                >
                    <template slot-scope="scope">
                        <div style="width: 200px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;">{{scope.row['content']}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="是否选中"
                >
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.chose"
                                :active-value="1"
                                :inactive-value="0"
                                @change=changeChosed(scope.row)></el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        label="创建日期"
                        align="center"
                        width="100">
                    <template slot-scope="scope">
                        <div align="center">{{scope.row['created_at']?scope.row['created_at'].slice(0, 11):'无'}}</div>
                        <div align="center">{{scope.row['created_at']?scope.row['created_at'].slice(11 ):'无'}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="状态/操作"
                        align="center"
                        fixed="right"
                        width="220"
                >
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="primary"
                                @click="handleEdit(scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="mt-3 float-right">
                <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageInfo.current_page"
                        :page-size="pageInfo.per_page"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageInfo.total">
                </el-pagination>
            </div>
        </div>
        <!--新增对话框-->
        <el-dialog :title="dialog.title"
                   top="2vh"
                   :visible.sync="dialogFormVisible"
                   :close-on-click-modal="false"
                   width="1000px">
            <el-form :model="form" :rules="rules" ref="form" label-width="50px" v-loading="loadingDialig">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="form.title" placeholder="请输入标题" style="width: 600px;"></el-input>
                </el-form-item>
                <el-form-item label="简介" prop="brief_info">
                    <el-input type="textarea" rows="3" v-model="form.brief_info" placeholder="请输入简介" style="width: 600px;"></el-input>
                </el-form-item>
                <el-form-item label="类型" prop="type">
                    <el-select v-model="form.type" placeholder="请选择类型" style="width: 450px;">
                        <el-option :label="财税服务" value="财税服务">
                        </el-option>
                        <el-option :label="商务合作" value="商务合作">
                        </el-option>
                        <el-option :label="系统反馈" value="系统反馈">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="是否选中" prop="chose">
                            <el-radio-group v-model="form.chose">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!--<el-form-item label="内容" prop="content">-->
                    <!--<el-input type="textarea" rows="8" v-model="form.content" placeholder="请输入主体内容" style="width: 450px;"></el-input>-->
                <!--</el-form-item>-->
                <el-form-item label="内容" prop="content"  style="height: 510px;">
                    <quill-editor
                            style="height:450px;"
                            v-model="form.content"
                            ref="myQuillEditor"
                            :options="editorOption"
                            @change="onEditorChange($event)">
                    </quill-editor>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" v-if="!dialog.isEdit" :loading="loadingCreate" @click="submitCostomer('form')">{{loadingCreate?'创建中':'点击创建'}}</el-button>
                <el-button type="primary" v-if="dialog.isEdit"  :loading="loadingCreate" @click="submitCostomer('form')">{{loadingCreate?'修改中':'点击修改'}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import { quillEditor } from 'vue-quill-editor';
    export default {
        name: "userList",
        data() {
            return {
                editorOption:{},
                editId: null,
                userInfo: {},
                pageInfo: {
                    per_page: 10,
                    total: 0,
                    current_page: 1
                },
                loadText: '数据加载中',
                userData: [],
                searchStr:'',
                search: {
                    roleStatus:'',
                    inputName:''
                },
                baseId: null,
                loading: false,
                loadingDialig: false,
                loadingCreate: false,
                dialogFormVisible: false,
                api:'api/admin/express/problem',
                form: {
                    title:'',
                    brief_info: '',
                    type: '',
                    content:'',
                    chose:1,
                },
                dialog: {
                    title: '',
                    isEdit: false
                },
                typeData:[],
                rules: {
                    title: [
                        { required: true, message: '请填写标题', trigger: 'change' }
                    ],
                    brief_info: [
                        { required: true, message: '请填写简介', trigger: 'change' }
                    ],
                    content: [
                        { required: true, message: '请填写内容', trigger: 'change' }
                    ],
                    chose: [
                        { required: true, message: '请确认是否选中', trigger: 'change' }
                    ],
                    type: [
                        { required: true, message: '请选择类型', trigger: 'change' }
                    ]
                }

            }
        },
        watch: {
            dialogFormVisible:function (val) {
                if (!val) {
                    Object.keys(this.form).forEach(key => this.form[key] = '');
                    this.$refs['form'].resetFields();
                    this.editId = null;
                    this.form.title = '';
                }
            }
        },
        created() {
            this.getContentList();
        },
        methods: {
            // beforeAvatarUpload (file) {
            //     var fileName=new Array()
            //     fileName =file.name.split('.');
            //     const extension = fileName[fileName.length-1] === 'jpeg'
            //     const extension2 =  fileName[fileName.length-1]=== 'png'
            //     if (!extension && !extension2) {
            //         this.$message({
            //             message: '上传模板只能是jpeg、png格式!',
            //             type: 'warning'
            //         });
            //     }
            //     if (extension || extension2) {
            //         let fd = new FormData()
            //         fd.append('fileUpload', file)
            //         this.newImport(fd);
            //     }
            //     return false;
            // },
            // newImport (data) {
            //     let config = {
            //         headers: {
            //             'Content-Type': 'application/x-www-form-urlencoded',
            //             'Authorization' : 'Bearer' + localStorage.getItem('token')
            //         }
            //     };
            //     this.loadingDialig = true;
            //     axios.post(process.env.VUE_APP_API_HOST + 'api/admin/common/uploadInfo', data,config)
            //         .then((res) => {
            //             this.form.imageUrl = res.data.data.path;
            //             this.loadingDialig = false;
            //         })
            //         .catch((err) => {
            //             this.loadingDialig = false;
            //             this.$message.warning(err.response.data.msg || "数据异常，请重试");
            //         })
            // },
            onEditorChange(val){//内容改变事件
                // console.info('内容改变事件',val);
                this.form.content = val.html;
            },
            changeChosed(val) {
                let params = {
                    chose: val.chose
                };
                this.$http.put(this.api+'/' + val.id, params)
                    .then((result) => {
                        this.$message({
                            type: 'success',
                            message: result.msg,
                            during: 1000
                        });
                    })
                    .catch((err) => {
                        this.$message.warning(err.data.msg || "数据异常，请重试");
                    })
            },
            changeName(val) {
                this.search.inputName = val;
            },
            openShanHu(){
                this.dialog.title = '添加疑难问题';
                this.dialog.isEdit = false;
                this.dialogFormVisible = true;
            },
            getContentList() {
                this.loading = true;
                this.$http.get(this.api + this.searchStr, {
                    params: {
                        pageSize: this.pageInfo.per_page,
                        page: this.pageInfo.current_page
                    }
                })
                    .then((result) => {
                        this.userData = result.data;
                        this.pageInfo.total = result.meta.total;
                        this.loading = false;
                    })
                    .catch((err) => {
                        this.loading = false;
                        this.$message.warning(err.data.msg || "数据异常，请重试");
                    })
            },
            onSearch() {
                this.searchStr ="";
                if (this.search.inputName) {
                    this.addConStr();
                    this.searchStr += `title$=%${this.search.inputName}%`;
                }
                this.pageInfo.current_page = 1;
                this.getContentList();
            },
            addConStr() {
                if (this.searchStr.length > 0) {
                    this.searchStr += '&';
                } else {
                    this.searchStr += '?';
                }
            },
            submitCostomer(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.creatShanHu();
                    } else {
                        return false;
                    }
                });
            },
            creatShanHu(){
                this.loadingCreate = true;
                let params;
                if (this.dialog.isEdit) {
                    params={
                        title: this.form.title,
                        chose:this.form.chose,
                        content:this.form.content,
                        type:this.form.type,
                        brief_info:this.form.brief_info
                    };
                    this.$http.put(this.api + '/' + this.baseId, params)
                        .then((result) => {
                            this.$message({
                                type: 'success',
                                message: '修改成功!',
                                during:1000
                            });
                            this.dialogFormVisible = false;
                            this.loadingCreate = false;
                            this.getContentList();
                        })
                        .catch((err) => {
                            this.loadingCreate = false;
                            this.$message.warning(err.data.msg || "数据异常，请重试");
                        })
                } else {
                    params={
                        title: this.form.title,
                        content:this.form.content,
                        type:this.form.type,
                        brief_info:this.form.brief_info
                    };
                    this.$http.post(this.api, params)
                        .then((result) => {
                            this.$message({
                                type: 'success',
                                message: '添加成功!',
                                during:1000
                            });
                            this.dialogFormVisible = false;
                            this.loadingCreate = false;
                            this.getContentList();
                        })
                        .catch((err) => {
                            this.loadingCreate = false;
                            this.$message.warning(err.data.msg || "数据异常，请重试");
                        })
                }

            },
            handleEdit(val) {
                this.baseId = val.id;
                this.dialog.title = '编辑疑难问题';
                this.dialog.type = '';
                this.dialog.isEdit = true;
                this.dialogFormVisible = true;
                this.loadingDialig = true;
                this.$http.get(this.api + '/' + val.id)
                    .then((result) => {
                        this.editId = result.data.id;
                        this.form.title = result.data.title;
                        this.form.chose = result.data.chose;
                        this.form.content = result.data.content;
                        this.form.brief_info = result.data.brief_info;
                        this.form.type = result.data.type;
                        this.loadingDialig = false;
                    })
                    .catch((err) => {
                        this.loadingDialig = false;
                        this.$message.warning(err.data.msg || "数据异常，请重试");
                    })
            },
            handleDelete(val) {
                this.$confirm('此操作将永久删除疑难问题, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.delete(this.api+'/' + val.id)
                        .then((result) => {
                            this.$message({
                                type: 'success',
                                message: '疑难问题删除成功!',
                                during:1000
                            });
                            this.getContentList();
                        })
                        .catch((err) => {
                            this.$message.warning(err.data.msg || "数据异常，请重试");
                        })
                }).catch(() => {
                });
            },
            handleSizeChange(val) {
                this.pageInfo.current_page = 1;
                this.pageInfo.per_page = val;
                this.getContentList();
            },
            handleCurrentChange(val) {
                this.pageInfo.current_page = val;
                this.getContentList();
            },
            tableHeaderColor({row, column, rowIndex, columnIndex}) {
                if (rowIndex === 0) {
                    return 'background-color: #FAFAFA;color: #000;font-weight: 500;height:54px;font-size:14px'
                }
            }
        }
    }
</script>

<style lang="less" >
    .check-children{
        cursor: pointer;
    }
    .check-children:hover{
        color: #409EFF;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
    .avatar {
        width: 50px;
        height: 50px;
        display: block;
    }
</style>